<template>
  <div>
    <el-row>
      <el-col
        :xs="{span: 24, offset: 0}"
        :sm="{span: 20, offset: 2}"
        :md="{span: 20, offset: 2}"
        :lg="{span: 20, offset: 2}"
        :xl="{span: 20, offset: 2}"
      >
        <!-- header部分 -->
        <el-header>
          <div class="nav">
            <span>
              <el-image :src=" imgHeader" fit="fill"></el-image>
            </span>
            <!-- <span class="logo">结构实验大厅试验预约管理系统&nbsp;</span> -->
            <div class="float-right">
              <el-button size="small" @click="logout" type="primary">
                <i class="el-icon-bell"></i>
                退出登录
              </el-button>&nbsp;
            </div>
          </div>
        </el-header>

        <el-main class="main-content">
          <!--  欢迎页面 -->
          <div v-if="welcomeFlag" class="welcome">
            {{userInfo.userName}}，你好。欢迎使用本系统！
            <i
              @click="closeWelcom"
              class="el-icon-close colse-btn"
            ></i>
          </div>

          <!-- 4个插件的页面 -->
          <el-tabs type="border-card" :value="activeTab" style="min-height:450px;">
            <!-- 我的项目标签页 -->
            <el-tab-pane name="first" v-if="userInfo.status==3">
              <span slot="label" @click="setActiveTab(`first`)">
                <i class="el-icon-house"></i> 我的项目
              </span>
              <!-- 添加的按钮就在这个头部中 -->
              <Header :header="projectsHeader"></Header>
              <el-table
                stripe
                :data="projects.slice(( queryInfo.pageNumber4 -1) * queryInfo.pageSize4, queryInfo.pageNumber4 * queryInfo.pageSize4)"
                :empty-text="emptyText.myprojects"
                v-loading="loading.projectsLoading"
                :row-style="{height:0+'px'}"
                :cell-style="{padding:4+'px'}"
              >
                <!-- index属性是自定义索引的，如果是1就是从1开始 -->
                <!-- <el-table-column type="index" label="序号" :index="1"></el-table-column> -->
                <el-table-column
                  label="项 目 名 称"
                  prop="project_name"
                  width="140"
                  header-align="center"
                ></el-table-column>
                <el-table-column label="审核状态">
                  <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                      <p>状态: {{ scope.row.statusString }}</p>
                      <p
                        v-if="scope.row.status ==2||scope.row.status ==3"
                      >详细原因: {{ scope.row.reason }}</p>
                      <p v-if="scope.row.status ==2||scope.row.status ==3">建议: 仔细阅读未通过原因，前往详情页面重新提交</p>
                      <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.statusString }}</el-tag>
                      </div>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="联系人" prop="owner" width="100"></el-table-column>
                <el-table-column label="提交日期" width="110">
                  <template slot-scope="scope">
                    <!-- <i class="el-icon-time"></i> -->
                    <span>{{ scope.row.create_time }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="开始日期" prop="start_time" width="110"></el-table-column>
                <el-table-column label="结束日期" prop="end_time" width="110"></el-table-column>
                <el-table-column label="进行阶段" prop="stageString"></el-table-column>
                <el-table-column label="阶段确认" prop="stageString" width="110" header-align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="success"
                      size="mini"
                      @click="dialogFormVisible3 = true,savecurrentProjectId(scope.row.id)"
                    >阶段选择</el-button>
                    <!-- 这个scope.row就是这个行对象，也就是数据源的意思，这个id就是这个数据源的id，由于这个数据源就是projects，所以直接就可用
                    删除按钮可以出现在这里，这个仅仅是操作用户自己的表，不会影响到中央仓库-->
                  </template>
                </el-table-column>

                <el-table-column
                  label="试 验 简 介"
                  prop="description"
                  min-width="330"
                  header-align="center"
                ></el-table-column>

                <el-table-column fixed="right" width="150">
                  <template slot="header" slot-scope="{}">
                    <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                    <br />
                    <div style="height:10px"></div>

                    <el-button type="primary" size="mini" @click="onSearchForUser">搜索</el-button>
                    <el-button type="primary" size="mini" @click="offSearchForUser">重置</el-button>
                  </template>
                  <template slot-scope="scope">
                    <!-- 将允许操作的按钮的逻辑变成文档中重新设定的逻辑 -->
                    <el-button type="primary" size="mini" @click="toDetail(scope.row.id)">详情</el-button>
                    <!-- 这个scope.row就是这个行对象，也就是数据源的意思，这个id就是这个数据源的id，由于这个数据源就是projects，所以直接就可用
                    删除按钮可以出现在这里，这个仅仅是操作用户自己的表，不会影响到中央仓库-->
                    <el-button
                      type="danger"
                      size="mini"
                      :disabled="scope.row.status==1"
                      @click="deleteProject(scope.row.id)"
                    >撤回</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-dialog title="阶段确认" :visible.sync="dialogFormVisible3">
                <el-form :model="stage" :rules="rules2" ref="rules2">
                  <el-form-item label="阶段" :label-width="formLabelWidth" prop="stage">
                    <el-select v-model="stage.stage" placeholder="请选择当前阶段">
                      <el-option label="未开始" value="0"></el-option>
                      <el-option label="模型进场" value="1"></el-option>
                      <el-option label="完成未退场" value="2"></el-option>
                      <el-option label="完成已退场" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible3 = false">取 消</el-button>
                  <el-button type="primary" @click="sureCurrentProjectStage('rules2')">确 定</el-button>
                </div>
              </el-dialog>
              <el-pagination
                @size-change="handleSizeChange4"
                @current-change="handleCurrentChange4"
                :current-page.sync="queryInfo.pageNumber4"
                :page-sizes="[5, 10, 30, 40]"
                :total="totalPage4"
                :page-size="5"
                layout="sizes, prev, pager, next"
              ></el-pagination>
            </el-tab-pane>

            <!-- 项目管理标签页，针对管理员开放 -->
            <el-tab-pane name="second" v-if="userInfo.status==2||userInfo.status==1">
              <span slot="label" @click="setActiveTab(`second`)">
                <i class="el-icon-sold-out"></i> 项目管理
              </span>
              <!-- 第一个的按钮也在这个里面 -->
              <div v-if="userInfo.status==2">
                <Header :header="requestHeader"></Header>
                <el-table
                  stripe
                  :data="authorizingProjects.slice(( queryInfo.pageNumber1 -1) * queryInfo.pageSize1, queryInfo.pageNumber1 * queryInfo.pageSize1)"
                  :empty-text="emptyText.requests"
                  v-loading="loading.projectsLoading"
                  :row-style="{height:0+'px'}"
                  :cell-style="{padding:4+'px'}"
                >
                  <!-- index属性是自定义索引的，如果是1就是从1开始 -->
                  <!-- <el-table-column type="index" label="序号" :index="1"></el-table-column> -->
                  <el-table-column
                    label="项 目 名 称"
                    prop="project_name"
                    width="140"
                    header-align="center"
                  ></el-table-column>
                  <el-table-column label="审核状态" width="100">
                    <template slot-scope="scope">
                      <el-popover trigger="hover" placement="top">
                        <p>状态: {{ scope.row.statusString }}</p>
                        <p
                          v-if="scope.row.status ==2||scope.row.status ==3"
                        >详细原因: {{ scope.row.reason }}</p>
                        <div slot="reference" class="name-wrapper">
                          <el-tag size="medium">{{ scope.row.statusString }}</el-tag>
                        </div>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column label="提交日期" width="110">
                    <template slot-scope="scope">
                      <!-- <i class="el-icon-time"></i> -->
                      <span>{{ scope.row.create_time }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="开始日期" prop="start_time" width="110" sortable></el-table-column>
                  <el-table-column label="结束日期" prop="end_time" width="110"></el-table-column>
                  <el-table-column label="负责人" prop="userName" width="90" sortable></el-table-column>
                  <el-table-column label="联系人" prop="owner" width="90" sortable></el-table-column>

                  <el-table-column label="联系人电话" prop="ownerphone" width="120"></el-table-column>
                  <el-table-column label="相关文件" width="85">
                    <template slot-scope="scope">
                      <el-popover placement="right" width="200" trigger="click">
                        <a :href="scope.row.methodURL">文件1：试验方案.pdf</a>
                        <br />
                        <a :href="scope.row.agreementURL">文件2：安全卫生协议.pdf</a>
                        <el-button type="primary" size="mini" slot="reference">查看</el-button>
                      </el-popover>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="试 验 简 介"
                    prop="description"
                    min-width="250"
                    header-align="center"
                  ></el-table-column>

                  <el-table-column label="操作" fixed="right" width="150" header-align="center">
                    <template slot-scope="scope">
                      <!-- 将允许操作的按钮的逻辑变成文档中重新设定的逻辑 -->
                      <el-button
                        type="success"
                        size="mini"
                        @click="okForThisProject(scope.row.id)"
                      >通过</el-button>
                      <!-- 这个scope.row就是这个行对象，也就是数据源的意思，这个id就是这个数据源的id，由于这个数据源就是projects，所以直接就可用
                      删除按钮可以出现在这里，这个仅仅是操作用户自己的表，不会影响到中央仓库-->
                      <el-button
                        type="danger"
                        size="mini"
                        :disabled="scope.row.status==1"
                        @click="dialogFormVisible = true,savecurrentProjectId(scope.row.id)"
                      >拒绝</el-button>
                    </template>
                  </el-table-column>
                  <!-- 弹框填理由 -->
                </el-table>
                <el-dialog title="拒绝理由" :visible.sync="dialogFormVisible">
                  <el-form :model="form" :rules="rules" ref="rules">
                    <el-form-item label="理由" :label-width="formLabelWidth" prop="reason">
                      <el-input
                        v-model="form.reason"
                        placeholder="请说明拒绝通过的理由"
                        type="textarea"
                        rows="5"
                        maxlength="100"
                        show-word-limit
                      ></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="rejectCurrentProject('rules')">确 定</el-button>
                  </div>
                </el-dialog>
                <el-pagination
                  @size-change="handleSizeChange1"
                  @current-change="handleCurrentChange1"
                  :current-page.sync="queryInfo.pageNumber1"
                  :page-sizes="[5, 10, 30, 40]"
                  :total="totalPage1"
                  :page-size="5"
                  layout="sizes, prev, pager, next"
                ></el-pagination>
              </div>

              <!-- 这里有一个操作就是将页码和数组的截取绑定，这样就能实现分页效果了 -->
              <Header :header="viewableHeader" class="top-margin"></Header>
              <el-table
                stripe
                :data="authorizedProjects.slice(( queryInfo.pageNumber -1) * queryInfo.pageSize, queryInfo.pageNumber * queryInfo.pageSize)"
                :empty-text="emptyText.viewables"
                v-loading="loading.projectsLoading"
                :row-style="{height:0+'px'}"
                :cell-style="{padding:4+'px'}"
              >
                <!-- index属性是自定义索引的，如果是1就是从1开始 -->
                <!-- <el-table-column type="index" label="序号" :index="1"></el-table-column> -->
                <el-table-column
                  label="项 目 名 称"
                  prop="project_name"
                  width="140"
                  header-align="center"
                ></el-table-column>

                <el-table-column label="提交日期" prop="create_time" width="110" sortable></el-table-column>
                <el-table-column label="进行阶段" prop="stageString" width="100">
                  <template slot-scope="scope">
                    <el-tag size="medium">{{ scope.row.stageString }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="负责人" prop="userName" width="90" sortable></el-table-column>
                <el-table-column label="联系人" prop="owner" width="90" sortable></el-table-column>
                <el-table-column label="联系人电话" prop="ownerphone" width="120"></el-table-column>
                <el-table-column label="开始日期" prop="start_time" width="110" sortable></el-table-column>
                <el-table-column label="结束日期" prop="end_time" width="110"></el-table-column>

                <el-table-column
                  label="试 验 简 介"
                  prop="description"
                  min-width="330"
                  header-align="center"
                ></el-table-column>

                <el-table-column fixed="right" width="220">
                  <template slot="header" slot-scope="{}">
                    <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                    <br />
                    <div style="height:10px"></div>
                    <div style="width:20px;display:inline-block"></div>
                    <el-button type="primary" size="mini" @click="onSearchProjectForAdmin">搜索</el-button>
                    <div style="width:40px;display:inline-block"></div>
                    <el-button type="primary" size="mini" @click="offSearchProjectForAdmin">重置</el-button>
                  </template>
                  <template slot-scope="scope">
                    <!-- 将允许操作的按钮的逻辑变成文档中重新设定的逻辑 -->
                    <el-button type="primary" size="mini" @click="toDetail(scope.row.id)">详情</el-button>
                    <el-button
                      type="success"
                      size="mini"
                      @click="dialogFormVisible2 = true,savecurrentProjectId(scope.row.id)"
                    >阶段</el-button>
                    <el-button
                      type="danger"
                      size="mini"
                      @click="dialogFormVisible = true,savecurrentProjectId(scope.row.id)"
                    >拒绝</el-button>
                    <!-- 这个scope.row就是这个行对象，也就是数据源的意思，这个id就是这个数据源的id，由于这个数据源就是projects，所以直接就可用
                    删除按钮可以出现在这里，这个仅仅是操作用户自己的表，不会影响到中央仓库-->
                  </template>
                </el-table-column>
              </el-table>
              <el-dialog title="阶段确认" :visible.sync="dialogFormVisible2">
                <el-form :model="stage" :rules="rules2" ref="rules2">
                  <el-form-item label="阶段" :label-width="formLabelWidth" prop="stage">
                    <el-select v-model="stage.stage" placeholder="请选择当前阶段">
                      <el-option label="模型进场" value="1"></el-option>
                      <el-option label="完成未退场" value="2"></el-option>
                      <el-option label="完成已退场" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                  <el-button type="primary" @click="sureCurrentProjectStage('rules2')">确 定</el-button>
                </div>
              </el-dialog>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="queryInfo.pageNumber"
                :page-sizes="[5, 10, 30, 40]"
                :total="totalPage"
                :page-size="5"
                layout="sizes, prev, pager, next"
              ></el-pagination>
            </el-tab-pane>

            <!-- 人员用户管理标签页，针对管理员开放 -->
            <el-tab-pane name="third" v-if="userInfo.status==2">
              <span slot="label" @click="setActiveTab(`third`)">
                <i class="el-icon-sell"></i> 人员管理
              </span>
              <!-- 上半部分 -->

              <Header :header="openRequestHeader"></Header>
              <el-table
                stripe
                :data="openingProjects.slice(( queryInfo.pageNumber2 -1) * queryInfo.pageSize2, queryInfo.pageNumber2 * queryInfo.pageSize2)"
                :empty-text="emptyText.checks"
                v-loading="loading.authLoading"
                :row-style="{height:0+'px'}"
                :cell-style="{padding:4+'px'}"
              >
                <el-table-column type="index" label="序号" :index="1" width="100px"></el-table-column>
                <el-table-column label="用户名" prop="userName">
                  <template slot-scope="scope">
                    <el-tag type="danger" size="medium">{{ scope.row.userName }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="创建日期" prop="create_time"></el-table-column>
                <!-- <el-table-column label="所属导师" prop="teacherBelong">
                  <template slot-scope="scope">
                    <el-tag type="danger" size="medium">{{ scope.row.teacherBelong }}</el-tag>
                  </template>
                </el-table-column>-->
                <el-table-column label="所属单位" prop="placeBelong"></el-table-column>
                <el-table-column label="邮箱" prop="email"></el-table-column>
                <el-table-column label="手机" prop="phone"></el-table-column>

                <el-table-column label="操作" header-align="center" fixed="right" width="150">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="recoverUser(scope.row.id)">激活</el-button>
                    <el-button type="danger" size="mini" @click="DeleteUser(scope.row.id)">驳回</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page.sync="queryInfo.pageNumber2"
                :page-sizes="[5, 10, 30, 40]"
                :total="totalPage2"
                :page-size="5"
                layout="sizes, prev, pager, next"
              ></el-pagination>

              <!-- 下半部分 -->
              <Header :header="openHeader" class="top-margin"></Header>
              <el-table
                stripe
                :data="openedProjects.slice(( queryInfo.pageNumber3 -1) * queryInfo.pageSize3, queryInfo.pageNumber3 * queryInfo.pageSize3)"
                :empty-text="emptyText.opens"
                v-loading="loading.authLoading"
                :row-style="{height:0+'px'}"
                :cell-style="{padding:4+'px'}"
              >
                <el-table-column type="index" label="序号" :index="1" width="100px"></el-table-column>
                <el-table-column label="用户名" prop="userName">
                  <template slot-scope="scope">
                    <el-tag size="medium">{{ scope.row.userName }}</el-tag>
                  </template>
                </el-table-column>

                <el-table-column label="创建日期" prop="create_time"></el-table-column>
                <!-- <el-table-column label="所属导师" prop="teacherBelong">
                  <template slot-scope="scope">
                    <el-tag size="medium">{{ scope.row.teacherBelong }}</el-tag>
                  </template>
                </el-table-column>-->
                <el-table-column label="所属单位" prop="placeBelong"></el-table-column>
                <el-table-column label="邮箱" prop="email"></el-table-column>
                <el-table-column label="手机" prop="phone"></el-table-column>

                <el-table-column fixed="right" width="150">
                  <template slot="header" slot-scope="{}">
                    <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                    <br />
                    <div style="height:10px"></div>
                    <el-button type="primary" size="mini" @click="onSearchUsersForAdmin">搜索</el-button>
                    <el-button type="primary" size="mini" @click="offSearchUsersForAdmin">重置</el-button>
                  </template>
                  <template slot-scope="scope">
                    <!-- <el-button type="primary" size="mini" @click="toDetail(scope.row._id)">查看</el-button> -->
                    <el-button type="danger" size="mini" @click="moveOutUser(scope.row.id)">冻结用户</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="handleSizeChange3"
                @current-change="handleCurrentChange3"
                :current-page.sync="queryInfo.pageNumber3"
                :page-sizes="[5, 10, 30, 40]"
                :total="totalPage3"
                :page-size="5"
                layout="sizes, prev, pager, next"
              ></el-pagination>
              <br />
              <div style="text-align: center;">
                <el-button
                  type="primary"
                  v-if="userInfo.status==2 || userInfo.status==1"
                  @click="dialogFormVisible5 = true"
                >生成验证码</el-button>
              </div>
              <el-dialog title="生成验证码" :visible.sync="dialogFormVisible5">
                <el-form :model="forgetCodeForm" :rules="rules4" ref="rules4">
                  <el-form-item label="验证码" :label-width="formLabelWidth" prop="teacherBelong">
                    <el-input
                      v-model="forgetCodeForm.teacherBelong"
                      placeholder="请输入用户修改密码所需的验证码"
                      type="textarea"
                      rows="1"
                      maxlength="100"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible5 = false">取 消</el-button>
                  <el-button type="primary" @click="generateForgetCode('rules4')">确 定</el-button>
                </div>
              </el-dialog>
            </el-tab-pane>

            <!-- 用户中心标签页  -->
            <el-tab-pane name="fourth">
              <span slot="label" @click="setActiveTab(`fourth`)">
                <i class="el-icon-user"></i> 用户中心
              </span>
              <Header :header="centerHeader"></Header>
              <el-alert
                v-if="false"
                class="warning"
                title="你的所属单位信息未完善，点击'编辑资料'完善个人信息"
                type="warning"
                show-icon
              ></el-alert>
              <User :userInfo="userInfo"></User>
            </el-tab-pane>

            <!-- 文件中心标签页  -->
            <el-tab-pane name="fifth" v-if="userInfo.status!=4">
              <span slot="label" @click="setActiveTab(`fifth`)">
                <i class="el-icon-s-order"></i> 文件中心
              </span>
              <!-- 添加的按钮就在这个头部中 -->
              <Header :header="fileCenterHeader"></Header>
              <el-table
                stripe
                :data="authProjects"
                :empty-text="emptyText.fileCenter"
                v-loading="loading.projectsLoading"
                :row-style="{height:0+'px'}"
                :cell-style="{padding:4+'px'}"
              >
                <!-- index属性是自定义索引的，如果是1就是从1开始 -->
                <!-- <el-table-column type="index" label="序号" :index="1"></el-table-column> -->
                <el-table-column label="文件名称" prop="name"></el-table-column>

                <el-table-column label="发布时间" prop="create_time"></el-table-column>
                <el-table-column fixed="right" width="150">
                  <template slot-scope="scope">
                    <!-- 将允许操作的按钮的逻辑变成文档中重新设定的逻辑 -->
                    <el-button type="primary" size="mini">
                      <a
                        :href="scope.row.domain+scope.row.fileURL"
                        style="text-decoration: none;color:white"
                      >下载</a>
                    </el-button>
                    <el-button
                      type="danger"
                      size="mini"
                      v-if="userInfo.status==2"
                      @click="deleteFileFromCenter(scope.row.id)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <el-dialog title="上传文件" :visible.sync="dialogFormVisible4">
                <el-form :model="fileCenter" :rules="rules3" ref="rules3">
                  <el-form-item label="文件名称" prop="name">
                    <el-input v-model="fileCenter.name" placeholder="请输入文件名称"></el-input>
                  </el-form-item>
                  <el-form-item label-width="120px" label="文件上传" prop="fileURL">
                    <el-upload
                      ref="fileURL"
                      :limit="1"
                      :action="$http.defaults.baseURL+'/upload/uploadFile'"
                      :before-upload="fileBeforeUpload"
                      accept=".pdf"
                      :on-success="afterUploadFile"
                    >
                      <el-button size="small" type="primary" icon="el-icon-upload">上传文件</el-button>
                      <div slot="tip" class="el-upload__tip">请扫描成pdf后上传，大小不超过 20MB</div>
                    </el-upload>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible4 = false">取 消</el-button>
                  <el-button type="primary" @click="uploadFileToCenter('rules3')">确 定</el-button>
                </div>
              </el-dialog>
              <br />
              <div style="text-align: center;">
                <el-button
                  type="primary"
                  v-if="userInfo.status==2 || userInfo.status==1"
                  @click="dialogFormVisible4 = true,savecurrentProjectId(scope.row.id)"
                >上传文件</el-button>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-main>

        <!-- footer部分 -->
        <siteFooter></siteFooter>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
//导入Header，在标签页面内作为页面标题使用；导入user标签作为用户资料卡
import Header from "../../components/HeaderinTab.vue";
import User from "../../components/User.vue";
export default {
  data() {
    return {
      imgHeader: require("../../assets/img/6.jpg"),

      search: "",
      //弹框数据
      rules4: {
        teacherBelong: [
          {
            required: true,
            message: "请设定验证码",
            trigger: "change"
          }
        ]
      },
      forgetCodeForm: {
        teacherBelong: ""
      },

      rules3: {
        name: [
          {
            required: true,
            message: "请输入文件名称",
            trigger: "change"
          }
        ]
      },

      fileCenter: {
        name: "",
        fileURL: ""
      },

      rules2: {
        stage: [
          {
            required: true,
            message: "请选择一个阶段",
            trigger: "change"
          }
        ]
      },
      stage: {
        stage: "",
        currentProjectId: Number
      },

      rules: {
        reason: [
          {
            required: true,
            message: "请输入申请理由，用于审核",
            trigger: "change"
          },
          {
            min: 4,
            max: 100,
            message: "长度在 4 到 100 个字符",
            trigger: "change"
          }
        ]
      },
      form: {
        reason: "",
        currentProjectId: Number
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      dialogFormVisible5: false,

      formLabelWidth: "120px",
      //分页数据
      queryInfo: {
        //页码信息设置
        pageNumber: 1,
        pageSize: "5",
        pageNumber1: 1,
        pageSize1: "5",
        pageNumber2: 1,
        pageSize2: "5",
        pageNumber3: 1,
        pageSize3: "5",
        pageNumber4: 1,
        pageSize4: "5"
      },
      totalPage: 0,
      totalPage1: 0,
      totalPage2: 0,
      totalPage3: 0,
      totalPage4: 0,
      //表格内容为空时的占位符
      emptyText: {
        myprojects: "查无项目",
        requests: "无正在审核的项目",
        viewables: "无审核通过的项目",
        checks: "无未激活权限人员",
        opens: "无用户",
        fileCenter: "无文件"
      },
      //标签页内用户项目部分header
      projectsHeader: {
        title: "项目列表 ",
        todo: "添加预约项目",
        // 这里需要去路由中找具体跳转到哪里去了
        url: "/home/createProjects",
        icon: "el-icon-plus",
        hasQuestion: true,
        alertTitle: "关于可查看项目的说明",
        type: "success",
        message:
          "1.表中所列项目为您申请的项目。<br />2.点击<strong>新建项目</strong>即可以新建项目。<br />3.点击<strong>详情</strong>即查看对应项目的详细信息，<strong>审核通过后</strong>不可撤回、不可修改。"
      },
      fileCenterHeader: {
        title: "文件列表 ",
        todo: "添加预约项目",
        // 这里需要去路由中找具体跳转到哪里去了
        url: "/home/createProjects",
        icon: "el-icon-s-order",
        hasQuestion: false,
        alertTitle: "关于可查看项目的说明",
        type: "primary",
        message: ""
      },
      //标签页内用户正在申请项目部分header
      requestHeader: {
        title: "正在申请审核列表 ",
        todo: "申请记录",
        //这里同理需要到路由中去找具体跳转到哪里去了
        url: "/history",
        icon: "el-icon-view",
        type: "primary",
        hasQuestion: false,
        message: ""
      },
      //标签页内用户已获得授权项目部分header
      viewableHeader: {
        title: "审核通过列表",
        todo: "申请说明",
        url: "/list",
        icon: "el-icon-bell",
        hasQuestion: false,
        type: "primary",
        alertTitle: "关于可查看项目的说明",
        message:
          "1.表中展示项目为得到授权可查看的项目。<br />2.点击<strong>开放项目</strong>可以查看所有开放的项目。<br />3.在开放项目获取授权后即可查看项目的详细信息。"
      },
      //标签页内等待用户授权项目部分header
      openRequestHeader: {
        title: "待激活用户列表 ",
        todo: "编辑人员权限",
        url: "/auth",
        icon: "el-icon-coordinate",
        type: "primary",
        hasQuestion: false,
        message: ""
      },
      //标签页内用户已已开放授权项目部分header
      openHeader: {
        title: "已激活所有用户列表 ",
        todo: "编辑人员权限",
        url: "/myopen",
        icon: "el-icon-tickets",
        type: "primary",
        hasQuestion: false,
        message: ""
      },
      //标签页内用户资料卡部分header
      centerHeader: {
        title: "用户资料 ",
        todo: "编辑资料",
        url: "/center",
        icon: "el-icon-user",
        type: "primary",
        hasQuestion: false,
        message: ""
      },
      loading: {
        projectsLoading: false,
        applicationLoading: false,
        authLoading: false
      },
      url: {
        methodURL: "",
        agreementURL: ""
      }
    };
  },
  components: {
    Header,
    User
  },
  computed: {
    ...mapState([
      "projects",
      "userInfo",
      "loadingFlags",
      "authProjects",
      "applicationProjects",
      "activeTab",
      "openingProjects",
      "openedProjects",
      "authorizingProjects",
      "authorizedProjects",
      "welcomeFlag"
    ])
  },
  methods: {
    ...mapActions([
      "setInitProject",
      "setInitAuthAboutProjects",
      "setInitApplicationAboutProjects",
      "setActiveTab",
      "clearToken",
      "setInitUserInfo",
      "setCloseWelcome",
      "setInitOpeningProjects",
      "setInitOpenedProjects",
      "setInitAuthorizingProjects",
      "setInitAuthorizedProjects"
    ]),
    //删除选中的文件
    deleteFileFromCenter(id) {
      this.$confirm("此操作将永久删除该项目记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .get("/project/deleteFileFromCenterByToken?info=" + id)
            .then(res => {
              if (res.data.code === 200) {
                this.getProjects();
                // this.getOpenProject();
                this.$message.success("删除成功!");
                this.$router.go(0);
              }
            });
        })
        .catch(() => {
          this.$message.info("已取消改操作");
        });
    },
    //上传文件到文件中心
    async uploadFileToCenter(rules) {
      this.$refs[rules].validate(valid => {
        if (valid) {
          this.fileCenter.name = this.fileCenter.name;

          this.fileCenter.fileURL = this.fileCenter.fileURL;

          this.$http
            .post("project/uploadFileToCenter", this.fileCenter)
            .then(res => {
              if (res.data.code == 200) {
                this.$message.success(`操作成功`);
                this.dialogFormVisible2 = false;
                this.dialogFormVisible3 = false;
                this.dialogFormVisible4 = false;
                this.dialogFormVisible5 = false;
                this.$router.go(0);
              }
              if (res.data.code == 300) {
                this.$message.error("请不要重复操作");
              }
            });
        } else {
          return false;
        }
      });
    },
    fileBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 20;
      if (!isRightSize) {
        this.$message.error("文件大小超过 20MB");
      }
      let isAccept = new RegExp(".pdf").test(file.type);
      if (!isAccept) {
        this.$message.error("应该选择.pdf类型的文件");
      }
      return isRightSize && isAccept;
    },
    afterUploadFile(res) {
      if (res.code == 200) {
        //这里只用获取到名称就行了，主要是为了后面提交文件的时候把名称存到数据库中
        this.fileCenter.fileURL = res.data.fileURL;
        this.$message.success("文件传输成功");
      } else {
        this.$message.error("文件传输失败");
      }
    },
    //针对普通用户的搜索
    onSearchForUser() {
      this.loading.projectsLoading = true;
      var info = this.search;
      this.$http
        .get(`project/searchProjectInfoByTokenAndString?info=` + info)
        .then(res => {
          if (null != res.data.data) {
            this.setInitProject(res.data.data);
            //计算出总页码数
            this.totalPage4 = this.projects.length;
            //清空搜索
            // this.search = "";
          } else {
            this.setInitProject([0, 1]);
          }

          this.loading.projectsLoading = false;
        });
    },
    //针对普通用户的重置
    offSearchForUser() {
      this.search = "";
      this.getProjects();
    },
    //针对管理员的搜索项目
    onSearchProjectForAdmin() {
      this.loading.projectsLoading = true;
      var info = this.search;
      this.$http
        .get(`project/searchProjectInfoByTokenAndString?info=` + info)
        .then(res => {
          if (null != res.data.data) {
            this.setInitAuthorizedProjects(res.data.data);
            //计算出总页码数
            this.totalPage = this.authorizedProjects.length;
          } else {
            this.setInitAuthorizedProjects([0, 1]);
          }

          this.loading.projectsLoading = false;
        });
    },
    //针对管理员的搜索项目的重置
    offSearchProjectForAdmin() {
      this.search = "";
      this.getAuditedProjects();
    },
    //针对管理员的搜索用户
    onSearchUsersForAdmin() {
      this.loading.projectsLoading = true;
      var info = this.search;
      this.$http
        .get(`project/searchUsersByTokenAndString?info=` + info)
        .then(res => {
          if (null != res.data.data) {
            this.setInitOpenedProjects(res.data.data);

            //计算出总页码数
            this.totalPage3 = this.openedProjects.length;
          } else {
            this.setInitOpenedProjects([0, 1]);
          }

          this.loading.projectsLoading = false;
        });
    },
    //针对管理员的搜索用户的重置
    offSearchUsersForAdmin() {
      this.search = "";
      this.getUnBlockedUsers();
    },

    //分页函数
    handleSizeChange(val) {
      this.queryInfo.pageSize = val;
    },
    handleSizeChange1(val) {
      this.queryInfo.pageSize1 = val;
    },
    handleSizeChange2(val) {
      this.queryInfo.pageSize2 = val;
    },
    handleSizeChange3(val) {
      this.queryInfo.pageSize3 = val;
    },
    handleSizeChange4(val) {
      this.queryInfo.pageSize4 = val;
    },

    //页码变更
    handleCurrentChange(val) {
      this.queryInfo.pageNumber = val;
    },
    handleCurrentChange1(val) {
      this.queryInfo.pageNumber1 = val;
    },
    handleCurrentChange2(val) {
      this.queryInfo.pageNumber2 = val;
    },
    handleCurrentChange3(val) {
      this.queryInfo.pageNumber3 = val;
    },
    handleCurrentChange4(val) {
      this.queryInfo.pageNumber4 = val;
    },
    fullfill() {
      if (this.userInfo.email === "" || this.userInfo.placeBelong === "") {
        return true;
      } else {
        return false;
      }
    },
    //通向详情页
    toDetail(id) {
      //还是需要携带id的，这个id不是区分用户的，而是区分项目的id的
      this.$router.push(`/home/project/${id}/index`);
    },
    //通过审核，管理员的功能
    okForThisProject(id) {
      this.$confirm("即将通过该项目的审核, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http.get("project/okForThisProject?info=" + id).then(res => {
            if (res.data.code == 200) {
              this.getProjects();
              this.$message.success("操作成功!");
              this.$router.go(0);
            } else {
              this.$message.error("网络错误");
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消改操作");
        });
    },
    //确认当前项目的状态
    async sureCurrentProjectStage(rules) {
      this.$refs[rules].validate(valid => {
        if (valid) {
          this.stage.currentProjectId = this.stage.currentProjectId;

          this.stage.stage = this.stage.stage;

          this.$http
            .post("project/sureCurrentProjectStage", this.stage)
            .then(res => {
              if (res.data.code == 200) {
                this.$message.success(`操作成功`);
                this.dialogFormVisible2 = false;
                this.dialogFormVisible3 = false;
                this.dialogFormVisible4 = false;
                this.dialogFormVisible5 = false;
                this.$router.go(0);
              }
              if (res.data.code == 300) {
                this.$message.error("请不要重复操作");
              }
            });
        } else {
          return false;
        }
      });
    },
    //生成验证码
    async generateForgetCode(rules) {
      this.$refs[rules].validate(valid => {
        if (valid) {
          this.forgetCodeForm.teacherBelong = this.forgetCodeForm.teacherBelong;

          var code = this.forgetCodeForm.teacherBelong;
          this.$http
            .get("project/generateForgetCode?info=" + code)
            .then(res => {
              if (res.data.code == 200) {
                this.$message.success(`操作成功`);
                this.dialogFormVisible = false;
                this.dialogFormVisible2 = false;
                this.dialogFormVisible3 = false;
                this.dialogFormVisible4 = false;
                this.dialogFormVisible5 = false;
                // this.$router.go(0);
              }
              if (res.data.code == 300) {
                this.$message.error("请不要重复操作");
              }
            });
        } else {
          return false;
        }
      });
    },
    //审核后拒绝
    async rejectCurrentProject(rules) {
      this.$refs[rules].validate(valid => {
        if (valid) {
          this.form.currentProjectId = this.form.currentProjectId;
          //trim()函数是去掉两边空格的
          this.form.reason = this.form.reason.trim();

          this.$http
            .post("project/rejectCurrentProject", this.form)
            .then(res => {
              if (res.data.code == 200) {
                this.$message.success(`操作成功`);
                this.dialogFormVisible = false;
                this.dialogFormVisible2 = false;
                this.dialogFormVisible3 = false;
                this.dialogFormVisible4 = false;
                this.dialogFormVisible5 = false;
                this.$router.go(0);
              }
              if (res.data.code == 300) {
                this.$message.error("请不要重复操作");
              }
            });
        } else {
          return false;
        }
      });
    },
    //激活、恢复用户权限
    recoverUser(id) {
      this.$confirm("此操作将激活用户的权限, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http.get("/project/recoverUser?info=" + id).then(res => {
            if (res.data.code === 200) {
              this.getProjects();
              // this.getOpenProject();
              this.$message.success("操作成功!");
              this.$router.go(0);
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消改操作");
        });
    },
    //直接删除用户
    DeleteUser(id) {
      this.$confirm("此操作将从本列表中移除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http.get("/project/deleteUser?info=" + id).then(res => {
            if (res.data.code === 200) {
              this.getProjects();
              // this.getOpenProject();
              this.$message.success("操作成功!");
              this.$router.go(0);
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消改操作");
        });
    },
    //冻结用户权限
    moveOutUser(id) {
      this.$confirm("此操作将冻结用户的权限, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http.get("/project/moveOutUser?info=" + id).then(res => {
            if (res.data.code === 200) {
              this.getProjects();
              // this.getOpenProject();
              this.$message.success("操作成功!");
              this.$router.go(0);
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消改操作");
        });
    },
    //这里的id就是从vuex的projects中取出来的
    deleteProject(id) {
      this.$confirm("此操作将永久删除该项目记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .get("/project/deleteProjectByToken?info=" + id)
            .then(res => {
              if (res.data.code === 200) {
                this.getProjects();
                // this.getOpenProject();
                this.$message.success("删除成功!");
                this.$router.go(0);
              }
            });
        })
        .catch(() => {
          this.$message.info("已取消改操作");
        });
    },
    //这是保存选中的项目的id的，弹框时候使用
    savecurrentProjectId(id) {
      this.form.currentProjectId = id;
      this.stage.currentProjectId = id;
    },

    logout() {
      window.localStorage.token = "";

      window.localStorage.userName = "";
      this.$router.push("/login");
    },
    closeWelcom() {
      //还是需要使用这个全局的状态管理，否则下次回到页面又会出现问题
      this.setCloseWelcome();
    },
    //获取用户信息，存到vuex中
    getUserInfo() {
      this.$http.get("/user/userInfoByToken").then(res => {
        if (res.data.code == 200) {
          this.setInitUserInfo(res.data.data);
        } else {
          this.$message.error("登录时效已过，请重新登录");
        }
      });
    },
    //针对所有用户的，获取文件中心的文件列表
    getFilesFromCenter() {
      this.loading.projectsLoading = true;
      this.$http.get(`project/getFilesFromCenter`).then(res => {
        if (res.data.code == 200) {
          if (null != res.data.data) {
            this.setInitAuthAboutProjects(res.data.data);
          } else {
            this.setInitAuthAboutProjects([0, 1]);
          }
        }

        this.loading.projectsLoading = false;
      });
    },
    //针对普通用户的，获取项目列表
    getProjects() {
      this.loading.projectsLoading = true;
      this.$http.get(`project/getProjectByToken`).then(res => {
        if (res.data.code == 200) {
          if (null != res.data.data) {
            this.setInitProject(res.data.data);
            //计算出总页码数
            this.totalPage4 = this.projects.length;
          } else {
            this.setInitProject([0, 1]);
          }
        }

        this.loading.projectsLoading = false;
      });
    },
    //针对管理员的，获取正在申请审核的项目列表
    getAuditProjects() {
      this.loading.projectsLoading = true;
      this.$http.get(`project/getAuditProjectByToken`).then(res => {
        if (null != res.data.data) {
          this.setInitAuthorizingProjects(res.data.data);
          //更改了逻辑以后，这里只用获取到总条目数就可以了
          this.totalPage1 = this.authorizingProjects.length;
        } else {
          this.setInitAuthorizingProjects([0, 1]);
        }

        this.loading.projectsLoading = false;
      });
    },
    //针对管理员的，获取审核通过的项目列表
    getAuditedProjects() {
      this.loading.projectsLoading = true;
      this.$http.get(`project/getAuditedProjectByToken`).then(res => {
        if (null != res.data.data) {
          this.setInitAuthorizedProjects(res.data.data);
          this.totalPage = this.authorizedProjects.length;
        } else {
          this.setInitAuthorizedProjects([0, 1]);
        }

        this.loading.projectsLoading = false;
      });
    },
    //针对管理员的，获取未激活、冻结权限的用户列表
    getBlockedUsers() {
      this.loading.projectsLoading = true;
      this.$http.get(`project/getBlockedUsers`).then(res => {
        if (null != res.data.data) {
          this.setInitOpeningProjects(res.data.data);
          this.totalPage2 = this.openingProjects.length;
        } else {
          this.setInitOpeningProjects([0, 1]);
        }

        this.loading.projectsLoading = false;
      });
    },
    //针对管理员的，获取激活权限的用户列表
    getUnBlockedUsers() {
      this.loading.projectsLoading = true;
      this.$http.get(`project/getUnBlockedUsers`).then(res => {
        if (null != res.data.data) {
          this.setInitOpenedProjects(res.data.data);
          this.totalPage3 = this.openedProjects.length;
        } else {
          this.setInitOpenedProjects([0, 1]);
        }

        this.loading.projectsLoading = false;
      });
    }
  },
  created() {
    this.getUserInfo();
    //获取用户信息以后，就是获取所有的项目（在后端自己会判断是管理员还是普通的用户）
    this.getProjects();
    this.getAuditProjects();
    this.getAuditedProjects();
    this.getBlockedUsers();
    this.getUnBlockedUsers();
    this.getFilesFromCenter();
    // console.log(this.projects.status);
  },
  mounted() {
    // 根据用户信息中的status判断应该开放哪个栏目，这个$nextTick必须写
    this.$nextTick(() => {
      if (this.userInfo.status == 3) {
        // document.getElementById("tab-second").style.display = "none";
        // document.getElementById("tab-third").style.display = "none";
        this.setActiveTab(`first`);
      } else if (this.userInfo.status == 4) {
        // document.getElementById("tab-second").style.display = "none";
        // document.getElementById("tab-third").style.display = "none";
        // document.getElementById("tab-first").style.display = "none";
        this.setActiveTab(`fourth`);
      } else {
        // document.getElementById("tab-first").style.display = "none";
        this.setActiveTab(`second`);
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.nav {
  height: 3em;
  line-height: 3em;
  border-bottom: 1px solid #e4e7ed;
  .logo {
    font-size: 20px;
    color: #303133;
  }
  .float-right {
    float: right;
    font-size: 14px;
  }
}
.main-content {
  padding: 10px 20px;
  width: 100%;
  min-height: 80vh;
  .welcome {
    font-size: 14px;
    height: 2em;
    line-height: 2em;
    text-align: center;
    border: 1px solid rgb(228, 248, 219);
    color: #67c23a;
    border-radius: 5px;
    background-color: rgb(228, 248, 219);
    @media screen and (max-width: 769px) {
      display: none;
    }
    .colse-btn {
      &:hover {
        cursor: pointer;
        color: #fff;
        background-color: #67c23a;
        border-radius: 50%;
      }
    }
  }
  .map {
    width: 100%;
    height: 500px;
    margin: 20px 0;
    border-radius: 5px;
  }
  .project {
    margin: 20px 0;
    padding: 10px 10px 40px;
    .user-onfo {
      margin: 20px 0;
    }
  }
  .top-margin {
    margin-top: 50px;
  }
  .warning {
    margin: 10px 0;
  }
}
</style>